<template>
    <div id="fireManagement">
        <div style="height: 100%;">
            <div class="body_right">
                <div class="header-right">
                    应急专家管理
                </div>
                <div class="btn_group">
                    <Input v-model="searchName" placeholder="姓名" size="small" style="width: 15rem;"/>
                    <Button type="primary" icon="ios-search" size="small" @click="search">查询</Button>
                </div>
                <div class="tableWidth">
                    <Table border :columns="columns7" :data="data6" stripe @on-selection-change="compileSelect"></Table>
                </div>
                <div class="page_container">
                    <Page :current="currentPage" :total="totalCount" size="small" simple class="page_btn" @on-change="changePage"></Page>
                    <P class="page_text">共{{totalCount}}条</P>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    var ezjsUtil = Vue.ezjsUtil;
    var apiConstants = ezjsUtil.constants.api;
    export default {
        data() {
            return {
                truckTypeText: '',
                //专家下拉数据
                specialistTypeData: [],
                //搜索条件
                searchOrganization: '',
                searchName: '',
                idss: "",   //批量删除项（各项ids值-以字符串形式串联起来，逗号分割）
                currentPage: 1, //当前页
                totalCount: 0,  //总条数
                /*  表头开始*/
                columns7: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'name',
                    },
                    {
                        title: '性别',
                        key: 'gender',
                        align: 'center',
                        render: (h, params) => {
                            const row = params.row;
                            const text = row.gender == 1 ? '男' : '女';
                            return h('div', {
                                props: {}
                            }, text);
                        }
                    },
                    {
                        title: '职称',
                        key: 'jobTitle',
                        align: 'center'
                    },
                    {
                        title: '专家类型',
                        key: 'specialistTypeName',
                        align: 'center'
                    },
                    {
                        title: '办公电话',
                        key: 'officeNumber',
                        align: 'center'
                    },
                    {
                        title: '手机',
                        key: 'phone',
                        align: 'center'
                    },
                ],
                /*表头结束*/
                /* 表格数据显示区域*/
                data6: [],
                /* 树结构*/
                baseData: [],
                /* 全局变量*/
                modal5: false,
                formValidate: {
                    id: '',
                    departmentName: '',
                    name: '',
                    gender: '1',
                    birthday: '',
                    education: '',
                    major: '',
                    jobTitle: '',
                    officeNumber: '',
                    homeNumber: '',
                    isSpecialist: '1',
                    phone: '',
                    numberLocation: '',
                    email: '',
                    attendworkTime: '',
                    operatePost: '',
                    emergencyMember: '1',
                    emergencyRole: '',
                    isYardman: '1',
                    specialistTypeId: '',
                    specialistTypeName: '',
                },
                ruleValidate: {
                    departmentName: [
                        {required: true, whitespace: true, message: '所属单位不能为空', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, whitespace: true, message: '姓名不能为空', trigger: 'blur'}
                    ],
                    birthday: [
                        {required: true, whitespace: true, message: '请选择出生日期', trigger: 'change'}
                    ],
                    operatePost: [
                        {required: true, whitespace: true, message: '工作岗位不能为空', trigger: 'blur'}
                    ],
                    attendworkTime: [
                        {required: true, whitespace: true, message: '请选择参加工作时间', trigger: 'change'}
                    ],
                    emergencyRole: [
                        {required: true, whitespace: true, message: '应急角色不能为空', trigger: 'blur'}
                    ],
                    officeNumber: [
                        {required: true, whitespace: true, message: '办公电话不能为空', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, whitespace: true, message: '手机不能为空', trigger: 'blur'}
                    ],
                    email: [
                        {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
                    ],
                }
            }
        },
        /* 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。*/
        created() {
            this.dictionary_flipList();
//      this.organization_flipList();
            this.specialistFlipList();
        },
        /*在挂载开始之前被调用：相关的 render 函数首次被调用。*/
        mounted: function () {

        },
        methods: {
            //日期格式转换
            dateformatting(dateval) {
                var newTime = new Date(dateval);
                var yyyy = newTime.getFullYear();
                var MM = newTime.getMonth() + 1;
                var dd = newTime.getDate();
                var hh = newTime.getHours();
                var mm = newTime.getMinutes();
                var ss = newTime.getSeconds();
                var time = yyyy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
                return time
            },
            add() {
                this.formValidate.id = "";
                this.modal5 = true;
            },
            //修改
            carInfoEdit(value) {
                this.formValidate.id = value.id;
                this.formValidate.departmentName = value.departmentName;
                this.formValidate.name = value.name;
                this.formValidate.gender = value.gender;
                this.formValidate.birthday = value.birthday;
                this.formValidate.education = value.education;
                this.formValidate.major = value.major;
                this.formValidate.jobTitle = value.jobTitle;
                this.formValidate.officeNumber = value.officeNumber;
                this.formValidate.homeNumber = value.homeNumber;
                this.formValidate.isSpecialist = value.isSpecialist;
                this.formValidate.phone = value.phone;
                this.formValidate.numberLocation = value.numberLocation;
                this.formValidate.email = value.email;
                this.formValidate.attendworkTime = value.attendworkTime;
                this.formValidate.operatePost = value.operatePost;
                this.formValidate.emergencyMember = value.emergencyMember;
                this.formValidate.emergencyRole = value.emergencyRole;
                this.formValidate.isYardman = value.isYardman;
                this.formValidate.specialistTypeId = value.specialistTypeId;
                this.formValidate.specialistTypeName = value.specialistTypeName;
                this.modal5 = true;
            },
            birthdayDateChange(data) {  //改变时，将日期值赋值
                this.formValidate.birthday = data;
            },
            attendworkTimeDateChange(data) {  //改变时，将日期值赋值
                this.formValidate.attendworkTime = data;
            },
            cancelFrom() {  //单击取消重置并关闭模态框
                this.handleReset('formValidate');
                this.modal5 = false;
            },
            changePage(page) {     //分页展示
                this.currentPage = page;
                this.specialistFlipList();
            },
            //显示 查询
            specialistFlipList() {
                var _this = this;
                ezjsUtil.request(apiConstants.specialist_flipList,
                    {
                        name: _this.searchName,
                        departmentName: _this.searchOrganization,
                        pageNo: _this.currentPage
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.data6 = data.listInfo;
                        _this.totalCount = data.flipInfo.totalCount;
                    }
                )
            },
            specialistEdit() { //新增
                var _this = this;
                ezjsUtil.request(apiConstants.specialist_edit,
                    {
                        id: _this.formValidate.id,
                        departmentName: _this.formValidate.departmentName,
                        name: _this.formValidate.name,
                        gender: _this.formValidate.gender,
                        birthday: _this.formValidate.birthday,
                        education: _this.formValidate.education,
                        major: _this.formValidate.major,
                        jobTitle: _this.formValidate.jobTitle,
                        officeNumber: _this.formValidate.officeNumber,
                        homeNumber: _this.formValidate.homeNumber,
                        isSpecialist: _this.formValidate.isSpecialist,
                        phone: _this.formValidate.phone,
                        numberLocation: _this.formValidate.numberLocation,
                        email: _this.formValidate.email,
                        attendworkTime: _this.formValidate.attendworkTime,
                        operatePost: _this.formValidate.operatePost,
                        emergencyMember: _this.formValidate.emergencyMember,
                        emergencyRole: _this.formValidate.emergencyRole,
                        isYardman: _this.formValidate.isYardman,
                        specialistTypeId: _this.formValidate.specialistTypeId,
                        specialistTypeName: _this.formValidate.specialistTypeName,
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.specialistFlipList();
                    }
                )
            },
            //删除
            compileSelect(selection, row) {   //表格选择
                var ids = "";
                for (var i = 0; i < selection.length; i++) {
                    ids = selection[i].id + "," + ids;    //逗号分隔
                }
                this.idss = ids;
            },
            carRemoveInfo(value) {  //单个删除
                this.idss = value;
                this.specialistRemoveByIds();
            },
            batchDele() { //批量删除
                this.specialistRemoveByIds(); //调用删除接口
            },
            specialistRemoveByIds() { //删除
                var _this = this;
                ezjsUtil.request(apiConstants.specialist_removeByIds,
                    {
                        ids: _this.idss   //将选中项的的ids给ids（字符串形式，逗号分隔）
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.specialistFlipList();
                    },
                )
            },
            search() { //查询
                this.currentPage=1;
                this.specialistFlipList();  //调用显示接口
            },

            handleSubmit(name) {  //表单验证
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.specialistEdit();  //调用编辑接口
                        this.$Message.success('提交成功!');
                        this.modal5 = false;               //关闭模态框
                        this.handleReset('formValidate');
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset(name) {  //重置
                this.$refs[name].resetFields();
            },

            /*组织机构数*/
            organization_flipList() { //显示 查询
                var _this = this;
                ezjsUtil.request(apiConstants.organization_flipList,
                    {},
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.baseData = data;
                    }
                )
            },

            /*字典数据相关接口*/
            dictionary_flipList() { //显示 查询
                var _this = this;
                ezjsUtil.request(apiConstants.dictionary_flipList,
                    {
                        key: "specialistType",
                    },
                    function (err, data) {
                        if (err) {
                            return;
                        }
                        _this.specialistTypeData = data;
                    }
                )
            },
        }
    }
</script>
<style lang="less" scoped>
    #fireManagement {
        height: 100%;
        overflow: auto;
        padding: 15px;

    .trees {
        width: 260px;
        height: 100%;
        padding-bottom: 30px;
        float: left;
        border: 1px solid #d3d8e0;
        overflow: auto;

    .tree_title {
        height: 40px;
        border-bottom: 1px solid #d3d8e0;

    .tree_title_h3 {
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #6e6d6d;
    }

    }
    .tree_body {
        padding-left: 8px;
    }

    }
    .body_right {
        /*margin-left: 280px;*/
        height: 100%;
        overflow: auto;

    .header-right {
        height: 40px;
        border-bottom: 1px solid #d3d8e0;
        font-size: 14px;
        color: #657180;
        line-height: 40px;
        font-family: '微软雅黑';
    }

    .btn_group {
        width: 100%;
        padding: 1.5rem 0;
    }

    .tableWidth {
        width: 100%;
    }

    }

    }
    .page_container {
        height: 30px;
        margin-top: 20px;

    .page_btn {
        float: right;
    }

    .page_text {
        float: right;
        line-height: 26px;
    }

    }
</style>
